<template>
  <Form
    ref="FormRef"
    :model="myForm"
    :rules="myFormRules"
    :label-position="labelPosition"
    :label-width="labelWidth"
    label-colon
    :disabled="formDisable"
  >
    <Row :gutter="24">
      <Col
        :span="item.span ? item.span : '24'"
        v-for="(item, index) in myFormOption"
        :key="index"
      >
        <FormItem :prop="item.key" :label="item.title">
          <Input
            v-model="myForm[item.key]"
            :type="item.formartType ? item.formartType : 'text'"
            v-if="item.type == 'Input'"
            :placeholder="'请输入' + item.title"
            clearable
            :disabled="item.disabled ? true : false"
            :maxlength="item.maxlength"
          />
          <RadioGroup v-model="myForm[item.key]" v-if="item.type == 'Radio'">
            <Radio
              :label="vv['value']"
              v-for="(vv, kk) in item['dict']"
              :key="kk"
              >{{ vv['label'] }}</Radio
            >
          </RadioGroup>
          <Select
            v-model="myForm[item.key]"
            v-if="item.type == 'Select'"
            filterable
            clearable
            @on-change="onSelectChange"
            @on-query-change="onQueryChange"
            @click="itemChange2(item)"
          >
            <Option
              :label="vv['label']"
              :value="vv['value']"
              v-for="(vv, kk) in item['dict']"
              :key="kk"
              >{{ vv['label'] }}</Option
            >
          </Select>
          <Select
            v-model="myForm[item.key]"
            v-if="item.type == 'Select2'"
            clearable
            @on-change="onSelectChange"
            @on-query-change="onQueryChange"
            @click="itemChange2(item)"
          >
            <Option
              :label="vv['label']"
              :value="vv['value']"
              v-for="(vv, kk) in item['dict']"
              :key="kk"
              >{{ vv['label'] }}</Option
            >
          </Select>
          <Input
            v-model="myForm[item.key]"
            v-if="item.type == 'InputNumber'"
            :placeholder="'请输入' + item.title"
            clearable
            class="numberInput"
            type="number"
          />
          <DatePicker
            :type="item.dateType"
            placement="bottom-end"
            :placeholder="'请选择' + item.title"
            v-model="myForm[item.key]"
            style="width: 100%"
            v-if="item.type == 'DatePicker'"
          />
          <!-- <Uploadimg v-model="myForm[item.key]" :token="token" v-if="item.type == 'upLoad'" /> -->
          <Select
            v-model="myForm[item.key]"
            v-if="item.type == 'SelectCreate'"
            filterable
            clearable
            allow-create
            @on-create="handleCreate1"
            @click="itemChange(item)"
          >
            <Option
              :label="vv['label']"
              :value="vv['value']"
              v-for="(vv, kk) in item['dict']"
              :key="kk"
              >{{ vv['label'] }}</Option
            >
          </Select>
        </FormItem>
      </Col>
    </Row>
  </Form>
  <div class="page-sys-menu-drawer-footer" v-if="!formDisable && buttonShow">
    <Button @click="cancelHandle">取消</Button>
    <Button
      type="primary"
      @click="getParamApi"
      :loading="submitLoading"
      style="margin-left: 10px"
      >确定</Button
    >
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
export default defineComponent({
  props: {
    // 值
    paramsObj: {
      type: Object,
      default: {},
    },
    // 配置
    formOptions: {
      type: Array,
      default: [],
    },
    // 规则
    formRules: {
      type: Object,
      default: {},
    },
    // 是否禁用
    formDisable: {
      type: Boolean,
      default: false,
    },
    // label位置
    labelPosition: {
      type: String,
      default: 'right',
    },
    // label宽度
    labelWidth: {
      type: String,
      default: '100',
    },
    buttonShow: {
      type: Boolean,
      default: true,
    },
  },
  emits: [
    'closeModal',
    'saveSuccess',
    'cancelForm',
    'formValue',
    'selectCreate',
    'onSelectChange',
    'onQueryChange',
    'onClickChange',
  ],
  setup(props, { emit }) {
    // loading
    const submitLoading = ref(false);
    // ref
    const FormRef = ref<HTMLElement>();
    // 表单
    const myForm = ref({});
    watch(
      () => props.paramsObj,
      (val) => {
        myForm.value = val;
      },
      { immediate: true }
    );
    // 规则
    const myFormRules = ref({});
    watch(
      () => props.formRules,
      (val) => {
        myFormRules.value = val;
      },
      { immediate: true }
    );
    const myFormOption = ref([]);
    watch(
      () => props.formOptions,
      (val) => {
        myFormOption.value = val;
      },
      { immediate: true }
    );
    watch(
      () => myForm.value,
      (val) => {
        emit('formValue', val);
      },
      { deep: true }
    );
    const selectItem = ref('');
    // 下拉框创建
    const handleCreate1 = (val) => {
      emit('selectCreate', val, selectItem.value);
    };
    const itemChange = (item) => {
      selectItem.value = item.key;
    };
    // 编辑-新增数据参数
    const getParamApi = () => {
      FormRef.value['validate']((valid) => {
        submitLoading.value = true;
        if (!valid) {
          submitLoading.value = false;
          return false;
        }
        if (valid) {
          emit('saveSuccess', myForm.value);
          submitLoading.value = false;
        } else {
          submitLoading.value = false;
        }
      });
    };
    // 下拉框选择
    const onSelectChange = (value) => {
      emit('onSelectChange', value);
    };
    //
    const itemChange2 = (item) => {
      emit('onClickChange', item);
      selectItem.value = item.key;
    };
    const onQueryChange = (value) => {
      emit('onQueryChange', value, selectItem.value);
    };
    // 关闭
    const closeModal = () => {
      emit('closeModal');
    };
    // 取消
    const cancelHandle = () => {
      emit('cancelForm');
    };
    return {
      myForm,
      myFormRules,
      myFormOption,
      FormRef,
      getParamApi,
      closeModal,
      cancelHandle,
      handleCreate1,
      itemChange,
      onSelectChange,
      onQueryChange,
      itemChange2,
    };
  },
});
</script>

<style scoped lang="less">
/* jsoneditor右上角默认有一个链接,加css去掉了 */
.jsoneditor-poweredBy {
  display: none;
}

.page-sys-menu-drawer-footer {
  text-align: right;
}
/deep/.numberInput input::-webkit-outer-spin-button,
/deep/.numberInput input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

/deep/.numberInput input[type='number'] {
  -moz-appearance: textfield;
}
/deep/ .ivu-input[disabled] {
  color: black;
}
/deep/ .ivu-radio-disabled .ivu-radio-inner:after {
  background-color: #2d8cf0;
}
</style>
